<script lang="ts" setup>
import { onMounted } from "vue";
import { drawLine_two, IStart } from "./util/drawLine_two";
import { drawLine_one } from "./util/drawLine_one";

const data = [
  {
    title: "2015-02-08(发展)",
    body: [
      {
        text: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        peo: ["llc", "lly"],
        org: ["zzzzzzzzz", "yyyyyyyyyyyyyyyyyyyyy"],
      },
      {
        text: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        peo: ["llc", "lly"],
        org: ["zzzzzzzzz", "yyyyyyyyyyyyyyyyyyyyy"],
      },
      {
        text: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        peo: ["llc", "lly"],
        org: ["zzzzzzzzz", "yyyyyyyyyyyyyyyyyyyyy"],
      },
    ],
  },
];

export type IContext = CanvasRenderingContext2D & {
  to: (x: number, y: number) => IContext;
};

onMounted(() => {
  const canvas = document.getElementById("can") as HTMLCanvasElement;
  const ctx = canvas.getContext("2d") as IContext;
  ctx.lineJoin = "round";
  ctx.lineCap = "round";
  ctx.to = function (x: number, y: number): IContext {
    this.lineTo(x, y);
    this.moveTo(x, y);
    return this;
  };
  drawLine_one(ctx, { x: 0, y: 300 }, data[0]).then((start: IStart) => {
    return drawLine_two(ctx, start);
  });
});
</script>

<template>
  <canvas id="can" width="900" height="600"></canvas>
</template>

<style scoped>
#can {
  border: 1px solid black;
}
</style>
